<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="msapplication-tap-highlight" content="no" />
		<link rel="stylesheet" href="../../js/plugins/element-ui/element-ui.css">
		<!--fontAwesome-->
		<link rel="stylesheet" href="../../css/front/font-awesome.min.css">
		<title>项目信息详细</title>
		<style>
			body {
				margin: 0;
				padding: 0;
				font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
			}
			
			header {
				padding: 0 10%;
				background: #373D41;
			}
			
			footer {
				color: #FFFFFF;
				height: 150px;
				line-height: 150px;
				text-align: center;
				background: #373D41;
				width: 100%;
			}
			
			ul {
				margin: 0;
				padding: 0;
			}
			
			ul li {
				list-style: none;
			}
			
			.logo {
				width: 200px;
				height: 63px;
				line-height: 80px;
				float: left;
			}
			
			.el-menu {
				padding: 0 10%;
			}
			
			.el-menu--horizontal .el-menu-item {
				float: right;
			}
			
			.sub-header {
				width: 70%;
				float: left;
				height: 63px;
				line-height: 63px;
				color: #FFFFFF;
			}
			
			.sub-header ul {
				width: 100%;
			}
			
			.sub-header ul li {
				float: left;
				margin: 0 20px;
				font-size: 14px;
				font-size: 16px;
			}
			
			.sub-header a {
				cursor: pointer;
			}
			.search{}
			.search .el-input__inner {
				min-width: 500px;
			}
			
			.el-table .info-row {
			    background: #c9e5f5;
			  }
			
			  .el-table .positive-row {
			    background: #e2f0e4;
			  }
			  .el-table .cell, .el-table th>div {
			  	text-align: center;
			  	}
		</style>
	</head>

	<body>
		<div id="project-detail">
			<!--header-->
			<header>
				<el-row :gutter="24">
					<el-col :span="4">
						<div class="logo">
							<img src="../../img/header_logoaa.gif" width="100%" />
						</div>
					</el-col>
					<el-col :span="12">
						<div class="sub-header">
							<ul>
								<li v-for="nav in navs">
									<a :href="nav.clik">{{nav.name}}</a>
								</li>
							</ul>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="sub-header" style="float: right;">
							<ul>
								<li>
									<a>登录</a>
								</li>
								<li>
									<a>注册</a>
								</li>
							</ul>
						</div>
					</el-col>
				</el-row>
			</header>
			<div class="content" style="border: 1px solid #000000;padding: 30px 10% 0px 10%;">
				<el-row :gutter="24">
					<el-col :span="4">
						<el-row :gutter="2">
							<el-col :span="8">
								<div class="" style="font-size: 16px;font-weight: bold;border-right: 1px solid #CECECE;height: 50px;line-height: 50px;">
									项目信息
								</div>
							</el-col>
							<el-col :span="15">
								<div class="" style="font-size: 14px;margin-left: 10px;height:50px;margin-top: 10px;">
									<span>过绿建云平台</span><br />
									<span>让您的业务快人一步</span>
								</div>

							</el-col>
						</el-row>
						<el-row :gutter="4">
							<el-col :span="24">
								<div class="" style="min-height: 300px;border: 1px solid #000000;">
									<ul>
										<li>工程信息库</li>
										<li>工程类别</li>
										<li>工程阶段</li>
										<li>如何使用工程信息帮助签单？</li>
										<li>
											<ul>
												<li>我看过的工程</li>
												<li>我关注的工程</li>
												<li>我收藏的工程</li>
											</ul>
										</li>
										<li>需求登记</li>
									</ul>
								</div>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="16">
						<el-row :gutter="24" style="margin: 10px 0 30px 0">
							<el-col :span="24">
								<div class="" style="height: 80px;border: 1px solid #000000;">
									banner
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="24" style="margin: 10px auto;">
							<el-col :span="16">
								<div class="search">
									<el-form :inline="true" :model="formSearch" class="demo-form-inline">
										<el-form-item label="">
											<el-input v-model="formSearch.ques" placeholder="找文章、答案、专家"></el-input>
										</el-form-item>
										<el-form-item>
											<el-button type="primary" icon="search" @click="onSubmit">搜索</el-button>
										</el-form-item>
									</el-form>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="24" style="margin: 10px auto;">
							<el-col :span="24">
								<el-tabs type="border-card">
								  <el-tab-pane label="用户管理">
								  		<el-table :data="tableData2" style="width: 100%;text-align: center;" :row-class-name="tableRowClassName">
											<el-table-column prop="name" label="贵州省工程信息" style="text-align: center;">
											</el-table-column>
											<el-table-column prop="stage" label="工程阶段" width="180">
											</el-table-column>
											<el-table-column prop="price" label="工程造价" width="180">
											</el-table-column>
											<el-table-column prop="date" label="更新时间" width="180">
											</el-table-column>
										</el-table>
								  </el-tab-pane>
								  <el-tab-pane label="配置管理">配置管理</el-tab-pane>
								  <el-tab-pane label="角色管理">角色管理</el-tab-pane>
								  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
								  <div class="">
								  	12432143
								  </div>
								</el-tabs>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="4">
						<div style="background: #FFFFFF;min-height: 350px;border: 1px solid #CECECE;padding: 5px;">
							会员产品广告图片
						</div>
					</el-col>
				</el-row>

			</div>
			<footer>
				<p>版权所有：贵州绿建云&nbsp;&nbsp;&nbsp;&nbsp;Copyright©2017 All rights reserved</p>
			</footer>
		</div>
		<script type="text/javascript" src="../../js/plugins/vue/vue.min.js"></script>
		<script type="text/javascript" src="../../js/plugins/element-ui/element-ui.js"></script>
		<script type="text/javascript" src="../../js/plugins/jQuery/jquery-3.1.1.min.js"></script>
	</body>
	<script>
		var Main = new Vue({
			el : '#project-detail',
			data :{
					//导航
					navs: [{
							name: '工程信息'
						},
						{
							name: '招投标信息'
						},
						{
							name: '会员服务'
						}

					],
					formSearch: {
						ques: ''
					},
					//贵州工程
					gzOptions: [{
						value: '选项1',
						label: '黄金糕'
					}, {
						value: '选项2',
						label: '双皮奶'
					}, {
						value: '选项3',
						label: '蚵仔煎'
					}, {
						value: '选项4',
						label: '龙须面'
					}, {
						value: '选项5',
						label: '北京烤鸭'
					}],
					gzValue: '',
					//全部工程类别
					allTypeOptions: [{
						value: '选项1',
						label: '黄金糕'
					}, {
						value: '选项2',
						label: '双皮奶'
					}, {
						value: '选项3',
						label: '蚵仔煎'
					}, {
						value: '选项4',
						label: '龙须面'
					}, {
						value: '选项5',
						label: '北京烤鸭'
					}],
					allTypeValue: '',
					//全部工程阶段
					allStageOptions: [{
						value: '选项1',
						label: '黄金糕'
					}, {
						value: '选项2',
						label: '双皮奶'
					}, {
						value: '选项3',
						label: '蚵仔煎'
					}, {
						value: '选项4',
						label: '龙须面'
					}, {
						value: '选项5',
						label: '北京烤鸭'
					}],
					allStageValue: '',
					tableData2: [{
			          date: '2016-05-02',
			          name: '上海市普陀区金沙江路 1518 弄</br>跟进信息：上海市普陀区金沙江路 1518 弄',
			          price: '￥1657.3',
			          stage:'第一阶段',
			        }, {
			           date: '2016-05-02',
			          name: '上海市普陀区金沙江路 1518 弄</br>跟进信息：上海市普陀区金沙江路 1518 弄',
			          price: '￥1657.3',
			          stage:'第一阶段',
			        }, {
			           date: '2016-05-02',
			          name: '上海市普陀区金沙江路 1518 弄</br>跟进信息：上海市普陀区金沙江路 1518 弄',
			          price: '￥1657.3',
			          stage:'第一阶段',
			        }, {
			          date: '2016-05-02',
			          name: '上海市普陀区金沙江路 1518 弄</br>跟进信息：上海市普陀区金沙江路 1518 弄',
			          price: '￥1657.3',
			          stage:'第一阶段',
			        }, {
			           date: '2016-05-02',
			          name: '上海市普陀区金沙江路 1518 弄</br>跟进信息：上海市普陀区金沙江路 1518 弄',
			          price: '￥1657.3',
			          stage:'第一阶段',
			        }, {
			           date: '2016-05-02',
			          name: '上海市普陀区金沙江路 1518 弄</br>跟进信息：上海市普陀区金沙江路 1518 弄',
			          price: '￥1657.3',
			          stage:'第一阶段',
			        },{
			          date: '2016-05-02',
			          name: '上海市普陀区金沙江路 1518 弄</br>跟进信息：上海市普陀区金沙江路 1518 弄',
			          price: '￥1657.3',
			          stage:'第一阶段',
			        }, {
			           date: '2016-05-02',
			          name: '上海市普陀区金沙江路 1518 弄</br>跟进信息：上海市普陀区金沙江路 1518 弄',
			          price: '￥1657.3',
			          stage:'第一阶段',
			        }, {
			           date: '2016-05-02',
			          name: '上海市普陀区金沙江路 1518 弄</br>跟进信息：上海市普陀区金沙江路 1518 弄',
			          price: '￥1657.3',
			          stage:'第一阶段',
			        },{
			          date: '2016-05-02',
			          name: '上海市普陀区金沙江路 1518 弄</br>跟进信息：上海市普陀区金沙江路 1518 弄',
			          price: '￥1657.3',
			          stage:'第一阶段',
			        }, {
			           date: '2016-05-02',
			          name: '上海市普陀区金沙江路 1518 弄</br>跟进信息：上海市普陀区金沙江路 1518 弄',
			          price: '￥1657.3',
			          stage:'第一阶段',
			        }, {
			           date: '2016-05-02',
			          name: '上海市普陀区金沙江路 1518 弄</br>跟进信息：上海市普陀区金沙江路 1518 弄',
			          price: '￥1657.3',
			          stage:'第一阶段',
			        },{
			           date: '2016-05-02',
			          name: '上海市普陀区金沙江路 1518 弄</br>跟进信息：上海市普陀区金沙江路 1518 弄',
			          price: '￥1657.3',
			          stage:'第一阶段',
			        }]
			},
			methods: {
				onSubmit:function() {
					console.log('submit!');
				},
				tableRowClassName:function(row, index) {
			        if (index === 1) {
			          return 'info-row';
			        } else if (index === 3) {
			          return 'positive-row';
			        }
			        return '';
			      }
			},
		})
	</script>

</html>